<template>
  <div class="container">
    <el-form size="small" label-width="100px">
      <el-form-item label="油站">
        <el-select v-model="params.gasId" label="选择油站" @change="getMyInterests">
          <el-option v-for="item in gasList" :label="item.gasName" :key="item.gasId" :value="item.gasId"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="list-box" v-if="myInterests.length">
      <div class="item-box" v-for="(item, index) in myInterests" :key="index">
        <img :src="item.pic" alt="" class="item-box-icon">
        <div class="item-box-title">{{item.interestName}}</div>
        <div class="item-box-oper">
          <div class="remain-num">
            <div>剩余数量</div>
            <div><span>{{item.remainNum}}</span><span>{{item.unitDesc}}</span></div>
            <div class="btn" v-if="canJumpRoute.includes(item.interestCode)" @click="goUse(item)">去使用</div>
          </div>
          <div class="used-num">
            <div>已使用数量</div>
            <div><span>{{item.usedNum}}</span><span>{{item.unitDesc}}</span></div>
            <div class="btn" v-if="isHasMarket.includes(item.interestCode)" @click="goMarket(item)">活动列表</div>
          </div>
          <div class="num">
            <div>购买总数量</div>
            <div><span>{{item.num}}</span><span>{{item.unitDesc}}</span></div>
            <div class="btn" @click="goUsedList(item)">使用记录</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="no-data">
      <img src="./../../assets/image/no-data-equite.png" alt="">
      <div>暂无权益</div>
    </div>
  </div>
</template>

<script>
import { getMyInterests, getAllGasInfoList } from '@/api/market'
import { mapGetters } from 'vuex'

export default {
  data () {
    return {
      myInterests: [],
      params: {},
      gasList: [],
      // 可以点击去使用的权益
      canJumpRoute: ['callLossDriver', 'callRoundDriver', 'gasSort', 'coupon'],
      // 可以点击活动列表的权益
      isHasMarket: ['callLossDriver', 'callRoundDriver', 'gasSort', 'coupon'],
      // 权益类型对应使用权益的路由
      typeToPath: {
        callLossDriver: '/marketCenter/callBackLoseDrvier',
        callRoundDriver: '/marketCenter/callBackAroundDrvier',
        gasSort: '/marketCenter/locationSortAdd',
        coupon: '/marketCenter/shopCoupon'
      }
    }
  },
  mounted () {
    const { gasId } = this.$route.query
    this.getAllGasStationsApi(gasId)
  },
  computed: {
    ...mapGetters([
      'routes'
    ])
  },
  methods: {
    async getMyInterests () {
      const { gasId } = this.params
      const { code, result = [] } = await getMyInterests({ gasId })
      if (code !== 200) return
      this.myInterests = result
    },
    // 获取加油站
    async getAllGasStationsApi (gasId) {
      try {
        const { code, result = [] } = await getAllGasInfoList()
        if (code !== 200) return
        this.$set(this.params, 'gasId', gasId || result[0].gasId)
        this.getMyInterests()
        this.gasList = result
      } catch (e) {
        console.log(e)
      }
    },
    goUsedList (params) {
      this.$router.push({
        name: 'equityUseList',
        query: {
          gasId: this.params.gasId,
          interestCode: params.interestCode
        }
      })
    },
    goUse ({ interestCode }) {
      const toPath = this.typeToPath[interestCode]
      let isCanTo = ''
      this.routes.forEach(route => {
        isCanTo = route.children.find(child => toPath === `${route.path}/${child.path}`)
      })
      if (!isCanTo) {
        return this.$message.warning('暂无权限，联系运营帮忙开通')
      }
      this.$router.push({
        path: toPath,
        query: {
          gasId: this.params.gasId
        }
      })
    },
    goMarket (params) {
      let path = '/marketCenter/marketActivity'
      if (params.interestCode === 'gasSort') {
        path = '/marketCenter/locationSort'
      }
      this.$router.push({
        path,
        query: {
          gasId: this.params.gasId,
          interestCode: params.interestCode
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .container {
    padding-top: 20px;
  }

  .list-box {
    display: flex;
    flex-wrap: wrap;
    .item-box {
      width: 31%;
      min-width: 291px;
      height: 400px;
      background: #ffffff;
      text-align: center;
      padding-top: 36px;
      margin: 10px;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      -ms-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s;
      &:hover {
        box-shadow: 0px 10px 30px 0px rgba(43, 54, 105, 0.2);
      }
      .item-box-icon {
        width: 130px;
        height: 130px;
      }
      .item-box-title {
        font-size: 20px;
        font-weight: 600;
        color: #222222;
        margin-top: 24px;
      }
      .item-box-oper {
        display: flex;
        margin-top: 36px;
        justify-content: space-evenly;
        div {
          div {
            &:nth-child(1) {
              font-size: 14px;
              font-weight: 400;
              color: #999999;
              margin-bottom: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              &:before {
                content: '';
                width: 5px;
                height: 5px;
                background: #44D7B6;
                display: block;
                margin-right: 8px;
                border-radius: 50%;
              }
            }
            &:nth-child(2) {
              font-size: 16px;
              font-weight: 400;
              color: #222222;
              margin-bottom: 18px;
              span {
                &:nth-child(1) {
                  font-size: 24px;
                  font-weight: 600;
                }
              }
            }
          }
          .btn {
            width: 90px;
            height: 32px;
            background: #4B7EFE;
            box-shadow: 0px 4px 8px -2px rgba(75, 126, 254, 0.3);
            border-radius: 2px;
            font-size: 14px;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 32px;
            cursor: pointer;
          }
        }
        .used-num, .num {
          .btn {
            background: #fff;
            color: #4B7EFE;
            border: 1px solid #4B7EFE;
          }
        }
        .used-num {
          div {
            &:nth-child(1) {
              &:before {
                background: #F55672 !important;
              }
            }
          }
        }
        .num {
          div {
            &:nth-child(1) {
              &:before {
                background: #4B7EFE !important;
              }
            }
          }
        }
      }
    }
  }

  .no-data {
    margin: 150px auto 0;
    width: 130px;
    img {
      width: 130px;
    }
    div {
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      color: #666666;
      margin-top: 15px;
    }
  }
</style>
